<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>反馈详情</span>
        <el-button @click="goBack">返回列表</el-button>
      </div>
      
      <div v-loading="loading">
        <!-- 基本信息 -->
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="反馈ID">{{ feedback.id }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ feedback.create_time }}</el-descriptions-item>
          <el-descriptions-item label="处理状态">
            <el-tag :type="feedback.status === 0 ? 'warning' : 'success'">
              {{ feedback.status === 0 ? '未处理' : '已处理' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ feedback.contact || '未提供' }}</el-descriptions-item>
        </el-descriptions>
        
        <!-- 用户信息 -->
        <el-descriptions title="用户信息" :column="2" border v-if="feedback.user" class="mt-20">
          <el-descriptions-item label="用户ID">{{ feedback.user_id }}</el-descriptions-item>
          <el-descriptions-item label="用户昵称">{{ feedback.user.nick_name }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">
            {{ userStore.isTest ? maskMobile(feedback.user.mobile) : feedback.user.mobile }}
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 反馈内容 -->
        <div class="content-box mt-20">
          <div class="content-title">反馈内容</div>
          <div class="content-body">{{ feedback.content }}</div>
        </div>
        
        <!-- 回复信息 -->
        <div class="reply-box mt-20" v-if="feedback.reply">
          <div class="content-title">回复信息</div>
          <div class="content-body">
            <p>{{ feedback.reply }}</p>
            <div class="reply-info">
              <span class="reply-time">回复时间：{{ feedback.reply_time }}</span>
            </div>
          </div>
        </div>
        
        <!-- 回复表单 -->
        <div class="reply-form mt-20" v-if="feedback.status === 0">
          <div class="content-title">回复反馈</div>
          <el-form :model="replyForm" :rules="replyRules" ref="replyFormRef">
            <el-form-item prop="reply">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入回复内容"
                v-model="replyForm.reply"
                :disabled="userStore.isTest"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitReply" :loading="submitLoading" :disabled="userStore.isTest">提交回复</el-button>
              <el-button type="success" @click="markAsResolved" :loading="statusLoading" :disabled="userStore.isTest">标记为已处理</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-box mt-20">
          <el-button type="danger" @click="handleDelete" :loading="deleteLoading" :disabled="userStore.isTest">删除反馈</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store/user'

const $axios = inject('axios')
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const submitLoading = ref(false)
const statusLoading = ref(false)
const deleteLoading = ref(false)
const replyFormRef = ref(null)
const feedback = ref({})
const feedbackId = route.params.id

// 回复表单
const replyForm = reactive({
  reply: ''
})

// 表单验证规则
const replyRules = {
  reply: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
}

// 获取反馈详情
const getDetail = async () => {
  if (!feedbackId) {
    ElMessage.error('反馈ID不能为空')
    return
  }
  
  loading.value = true
  try {
    const response = await $axios.get(`/admin/feedbacks/${feedbackId}`)
    if (response.data.code === 0) {
      feedback.value = response.data.data
    } else {
      ElMessage.error(response.data.message || '获取反馈详情失败')
    }
  } catch (error) {
    console.error('获取反馈详情失败', error)
    ElMessage.error('获取反馈详情失败')
  } finally {
    loading.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.push('/feedback/list')
}

// 提交回复
const submitReply = async () => {
  if (!replyFormRef.value) return
  
  // 检查权限
  if (userStore.isTest) {
    ElMessage.warning('测试账号不能回复反馈')
    return
  }
  
  try {
    const valid = await replyFormRef.value.validate()
    if (!valid) return
    
    submitLoading.value = true
    const response = await $axios.post(`/admin/feedbacks/reply/${feedbackId}`, { 
      reply: replyForm.reply 
    })
    
    if (response.data.code === 0) {
      ElMessage.success('回复成功')
      getDetail()
      replyForm.reply = ''
    } else {
      ElMessage.error(response.data.message || '回复失败')
    }
  } catch (error) {
    console.error('回复失败', error)
    ElMessage.error('回复失败')
  } finally {
    submitLoading.value = false
  }
}

// 标记为已处理
const markAsResolved = async () => {
  // 检查权限
  if (userStore.isTest) {
    ElMessage.warning('测试账号不能修改反馈状态')
    return
  }

  statusLoading.value = true
  try {
    const response = await $axios.post(`/admin/feedbacks/status/${feedbackId}`, { 
      status: 1 
    })
    if (response.data.code === 0) {
      ElMessage.success('已标记为已处理')
      getDetail()
    } else {
      ElMessage.error(response.data.message || '操作失败')
    }
  } catch (error) {
    console.error('操作失败', error)
    ElMessage.error('操作失败')
  } finally {
    statusLoading.value = false
  }
}

// 删除反馈
const handleDelete = () => {
  ElMessageBox.confirm('确定要删除这条反馈吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    deleteLoading.value = true
    try {
      const response = await $axios.post(`/admin/feedbacks/delete/${feedbackId}`)
      if (response.data.code === 0) {
        ElMessage.success('删除成功')
        router.push('/feedback/list')
      } else {
        ElMessage.error(response.data.message || '删除失败')
      }
    } catch (error) {
      console.error('删除失败', error)
      ElMessage.error('删除失败')
    } finally {
      deleteLoading.value = false
    }
  }).catch(() => {})
}

// 手机号脱敏处理
const maskMobile = (mobile) => {
  if (!mobile) return '';
  return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
}

onMounted(() => {
  getDetail()
})
</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}

.content-title {
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid #409EFF;
  line-height: 1.2;
}

.content-box, .reply-box {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.content-body {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.reply-info {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  color: #909399;
  font-size: 12px;
}

.action-box {
  display: flex;
  justify-content: flex-end;
}
</style> 